<template>
	<view class="search-box" :style="{ background: backColor }">
		<u-search
			v-model="searchValue"
			shape="round"
			:showAction="false"
			:placeholder="placeholder"
			:pageTitle="pageTitle"
			:bgColor="bgColor"
			@clear="clear"
			style="background-color: rgba(0, 0, 0, 0)"
		></u-search>
		<view class="search-btn" :style="{ background: color }" @click="clickSearch">搜索</view>
	</view>
</template>

<script>
export default {
	name: 'Search',
	props: {
		// searchValue: {
		// 	type: [String, Number],
		// 	default: ''
		// },
		pageTitle: {
			type: String,
			default: '搜索页面的导航'
		},
		placeholder: {
			type: String,
			default: '请输入'
		},
		backColor: {
			type: String,
			default: '#F6F6F6'
		},
		bgColor: {
			type: String,
			default: '#F6F6F6'
		},
		searchUrl: {
			type: String,
			default: ''
		},
		searchParams: {
			type: Object
		},
		color: {
			type: String,
			default: '#009b7c'
		}
	},
	data() {
		return {
			searchValue: ''
		};
	},
	created() {
		uni.setStorageSync('clickSearch', false);
	},
	watch: {
		searchValue: {
			handler(newVal) {
				// 使用 trim() 处理前后空格
				const is_empty = newVal.trim();
				if (!is_empty) {
					this.clear();
				}
			}
		},
		immediate: true
	},
	methods: {
		clear() {
			this.$emit('clear');
		},
		clickSearch() {
			this.$emit('search', this.searchValue);
			// const clickSearch = uni.getStorageSync('clickSearch')
			// if (clickSearch) return
			// uni.setStorageSync('clickSearch', true)
			// const urlParams = {
			// 	title: this.pageTitle,
			// 	placeholder: this.placeholder,
			// }
			// const params = encodeURIComponent(JSON.stringify(urlParams))
			// const searchParams = encodeURIComponent(JSON.stringify(this.searchParams))
			// uni.navigateTo({
			// 	url: `${this.searchUrl}?params=${params}&searchParams=${searchParams}&searchValue=${this.searchValue}`
			// })
		}
	}
};
</script>
<style lang="scss" scoped>
.search-box {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin: 0 35rpx;
	padding: 0 10rpx;
	height: 40px;
	border-radius: 20px;
	line-height: 40px;
	.search-btn {
		width: 120rpx;
		height: 60rpx;
		border-radius: 30rpx;
		line-height: 60rpx;
		text-align: center;
		color: #fff;
		// background-color: #0b3f35;
	}
}
</style>
